<template>
  <view class="page">
    <scroll-view style="height: 100%" scroll-y="true"
                 scroll-with-animation="true">
      <view class="recommend-container">
        <view class="recommendList" v-for="item in wannaConcertList" @click="toDetail(item)">
          <view class="recommend-item">
            <view class="poster-box">
              <view class="image">
                <image :src="item.performanceCoverUrl"></image>
              </view>
            </view>
            <view class="info-box">
              <view class="bold-text">
                {{ item.performanceTitle }}
              </view>
              <view class="topic">
                {{ item.performerNames }}
              </view>
              <view class="date">
                {{ formatDateTime2WeekDate(item.showTime) }}
              </view>
              <view class="address">
                {{ item.venueCity }}
                <view class="icon">|</view>
                {{ item.venueName }}
              </view>
              <view class="state-tag">
                <uni-tag
                    :inverted="true"
                    :circle="true"
                    size="normal"
                    :text="valueOf(item.performanceStatus).chineseName"
                    :type="valueOf(item.performanceStatus).showType"
                />
              </view>
              <view class="price">
                ￥{{ item.minPrice }}
                <view class="start">
                  起
                </view>
              </view>
              <view class="love" @click="removeWanna(item)">
                <image src="../../static/love.png" mode=""></image>
              </view>
            </view>
          </view>
        </view>
        <view class="empty" v-if="wannaConcertList.length === 0">
          <image class="centered-image" src="../../static/empty.png"></image>
        </view>
      </view>

    </scroll-view>
    <tabbar current="2"></tabbar>
  </view>
</template>

<script>
import {getWannaPerformance, wannaPerformance} from "../../api/user/concert";
import {formatDateTime2WeekDate} from "../../utils/DateUtils";
import store from "../../store";
import {valueOf} from "../../utils/PerformanceStatusUtil";

export default {
  data() {
    return {
      wannaConcertList: [],
    };
  },
  onShow() {
    this.getList();
  },
  methods: {
    valueOf,
    formatDateTime2WeekDate,
    getList() {
      getWannaPerformance().then(res => {
        this.wannaConcertList = res.data;
      })
    },
    toDetail(item) {
      uni.navigateTo({
        url: `/subpkg/concert-detail/concert-detail?performanceId=${item.performanceId}`,
        fail(error) {
          console.log(error);
        },
      });
    },
    removeWanna(performance) {
      wannaPerformance({
        performanceId: performance.performanceId,
        isLike: 0
      }).then(res => {
        if (res.success) {
          // 从列表中进行移除
          store.commit('userRemoveWanna', performance.performanceId);
          const index = this.wannaConcertList.findIndex(item => item.performanceId === performance.performanceId);
          if (index !== -1) {
            this.wannaConcertList.splice(index, 1);
          }
        } else {
          wx.showToast({
            title: res.message,
            icon: "error",
            duration: 2000,
          });
        }
      })
    }
  }
}

</script>

<style lang="scss">
.page {
  height: calc(100% - 150upx);
}

.recommend-container {
  width: 100%;
}

.recommendList {
  margin-top: 10px;
  // margin-left: 10px;
  .recommend-item {
    position: relative;
    margin-top: 10px;
    height: 420rpx;
    box-shadow: 0px 0px 10px #f0e5e6;
    border-radius: 10px;
    padding: 10px 10px;
  }

  .poster-box {
    position: absolute;
    width: 35%;

    .image {
      width: 100%;
      height: 360rpx;
      border-radius: 5px;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .info-box {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 58%;

    .bold-text {
      font-weight: 700;
      font-family: "fangsong";
      font-size: 18px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
      word-wrap: break-word;
    }

    .topic {
      margin-top: 10px;
      color: #ff7627;
      font-size: 15px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
      display: inline-block;
    }

    .date {
      margin-top: 5px;
      color: #504f4c;
      font-size: 14px;
    }

    .address {
      display: flex;
      justify-content: start;
      letter-spacing: 2rpx;
      margin-top: 5px;
      color: #504f4c;
      font-size: 14px;

      .icon {
        color: #ceccc5;
        font-size: 14px;
      }
    }

    .state-tag {
      margin-top: 10px;
    }

    .price {
      margin-top: 7px;
      display: flex;
      justify-content: start;
      font-size: 26px;
      color: #d4237a;

      .start {
        margin-top: 7px;
        margin-left: 3px;
        font-size: 18px;
        color: #4b4a47;
      }
    }

    .love {
      position: absolute;
      bottom: 3px;
      right: 0px;
      width: 30px;
      height: 30px;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh; /* Set the height of the container to the viewport height for vertical centering */
}

.centered-image {
  width: 240px; /* Allow the width to adjust based on the image's aspect ratio */
  height: 240px; /* Allow the height to adjust based on the image's aspect ratio */
}
</style>

